<template>
  <div class="main">
    <div class="left">
      <div class="left-one">
        <div class="box-content data-number">
          <div>当前数据量</div>
          <div>{{dataNumber}}</div>
        </div>
      </div>
      <div class="left-one">
        <div class="box-title">
          <div class="wordCloud">
            <h3 @click="selectCloud1" :style="{color:vIndustry?'white':'#899aa9'}">{{title1}}</h3>
            <span class="divide"></span>
            <h3 @click="selectCloud2" :style="{color:vComment?'white':'#899aa9'}">{{title2}}</h3>
          </div>
        </div>
        <div class="box-content">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <WordCloudChart v-show="vIndustry" id="industry"></WordCloudChart>
          <WordCloudChart v-if="vComment" id="comment" :word-data="iCloudWord" font-min-size="14" font-max-size="36"></WordCloudChart>
        </div>
      </div>
      <div class="left-one" >
        <div class="box-title">
          <div class="wordCloud">
            <h3>{{title3}}</h3>
          </div>
        </div>
        <fashion></fashion>
      </div>
    </div>
    <div class="middle">
      <div class="head">
        <h1>{{Title}}</h1>
      </div>
      <general></general>
      <graph></graph>
      <div class="left-one" style="position: relative;">
        <div class="box-title">
          <div class="wordCloud">
            <h3>{{title7}}</h3>
          </div>
        </div>
        <button style="position: absolute;right: 1rem;top: 14px;background-color: #142131;border: 1px solid white;color: white;padding: 8px;">用户管理</button>
      </div>
      <result></result>
    </div>

    <div class="right">
      <div class="right-one">
        <div class="box-title">
          <div class="dataGraph">
            <h3>{{title4}}</h3>
          </div>
        </div>
        <div class="box-content">
          <comment :data-x="commentDataX" :data-y="commentDataY"></comment>
        </div>
      </div>
      <div class="right-one">
        <div class="box-title">
          <div class="dataGraph">
            <h3>{{title5}}</h3>
          </div>
        </div>
        <div class="box-content">
          <clotheSell></clotheSell>
        </div>
      </div>
      <div class="right-last">
        <div class="box-title">
          <div class="dataGraph">
            <h3>{{title6}}</h3>
          </div>
        </div>
        <div class="response">
          <div class="rating">总体评分：</div>
<!--          <div class="rating-number">{{rating}}</div>-->
          <el-rate v-model="rating" disabled></el-rate>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import WordCloudChart from "@/components/WordCloudChart";
import comment from "@/components/comment";
import clotheSell from "@/components/clotheSall";
import general from "@/components/general";
import graph from "@/components/graph";
import result from "@/components/result";
import fashion from "@/components/fashion";
export default {
  name: 'HelloWorld',
  components: {
    WordCloudChart,
    comment,
    clotheSell,
    general,
    graph,
    result,
    fashion,
  },
  data(){
    return {
      Title: '图阅缝智·服装行业数据分析与可视化',
      // Title: '服装消费数据的分析与可视化平台',
      title1: '行业热点',
      title2: '服装评论',
      title3: '潮流关键词',
      title4: '搭配Top5观点',
      title5: '行业服装相关数据',
      title6: '反馈',
      title7: '服装评论聚类结果',
      vIndustry: true,
      vComment: false,
      dataNumber: '843,446,7',
      rating: 3,
      iCloudWord: [
        {name: '搭配衬衫',value: 211},
        {name: '大小适中',value: 201},
        {name: '颜色好看',value: 193},
        {name: '非常好',value: 190},
        {name: '合身',value: 170},
        {name: '面料柔软',value: 170},
        {name: '布料舒服',value: 142},
        {name: '款式偏小',value: 136},
        {name: '非常喜欢',value: 118},
        {name: '面料舒适',value: 109},
        {name: '材质亲肤',value: 103},
        {name: '衣服很漂亮',value: 99},
        {name: '很完美',value: 89},
        {name: '穿上显可爱',value: 86},
        {name: '衣服偏大',value: 78},
        {name: '大小刚好合身',value: 74},
        {name: '是黑色',value: 72},
        {name: '衣服很美丽',value: 68},
        {name: '质量很好',value: 66},
        {name: '长度适中',value: 64},
        {name: '袖子比较宽松',value: 60},
        {name: '白色',value: 58},
        {name: '是黑色',value: 72},
        {name: '衣服很美丽',value: 68},
        {name: '质量很好',value: 66},
        {name: '长度适中',value: 64},
        {name: '袖子比较宽松',value: 60},
        {name: '白色',value: 58},
        {name: '是黑色',value: 72},
        {name: '衣服很美丽',value: 68},
      ],
      commentDataX: [50,33,26,21,10],
      commentDataY: ['休闲裤和高跟鞋','紧身牛仔裤和平底鞋','高腰裤','七分裤','高腰弹力短裤'],
    }
  },
  props: {

  },
  methods: {
    selectCloud1(){
      console.log('here');
      if(this.vComment){
        this.vComment = false;
        this.vIndustry = true;
      }
    },
    selectCloud2(){
      if(this.vIndustry){
        this.vComment = true;
        this.vIndustry = false;
      }
    },
  }
}
</script>

<style scoped>
.rating{
  flex: 0 0 40%;
  color: #108be4;
  margin-left: 3rem;
  font-size: 2rem;
}
.rating-number{
  flex: 0 0 40%;
  font-size: 4rem;
  font-weight: bold;
  color: white;
}
.main {
  width: 100%;
  height: 100%;
  /*background-image: url("../assets/bg.png");*/
  /*background-color: #142131;*/
  background-color: rgba(20,33,49);
  background-size: contain;
  display: flex;
}
.head {
  background: url("../assets/title_border.png") bottom center no-repeat;
  text-align: center;
  width: 100%;
}
.response{
  /*width: 100%;*/
  flex: 1;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  /*height: 100px;*/
  background-color: #133856;
  border: 1px solid #0e94ea;
  display: flex;
  justify-content: center;
  align-items: center;
}
.head h1{
  margin: 0;
  color: white;
  padding: 1rem;
  display: inline-block;
  font-size: 1.7rem;
  /*font-size: 3rem;*/
}
.box-title {
  background: url("../assets/box_title.png") left center no-repeat;
  /*background-size: cover;*/
  color: white;
}
.wordCloud{
  position: relative;
  left: 2rem;
  font-weight: normal;
  display: flex;
}
.wordCloud h3:hover{
  cursor: pointer;
}
.dataGraph{
  display: inline-block;
  padding-left: 2rem;
}
.box-content {
  margin-right: 19px;
  margin-top: 0.5rem;
  position: relative;
}
.data-number {
  background-image: url("../assets/border_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 160px;
  width: 490px;
  display: flex;
  flex-direction: column;
}
.data-number div:nth-child(1){
  flex: 0 0 50%;
  color: #0e94ea;
  font-size: 1.5rem;
  font-weight: bold;
  margin: auto;
  display: flex;
  align-items: center;
}
.data-number div:nth-child(1)::before{
  content: '//';
  position: relative;
  right: 1rem;
}
.data-number div:nth-child(1)::after{
  content: '//';
  position: relative;
  left: 1rem;
}
.data-number div:nth-child(2){
  flex: 0 0 50%;
  color: white;
  font-size: 3rem;
  margin: auto;
  display: flex;
}
.divide{
  border-left: 2px solid blue;
  margin: 1.4rem 1rem 1.4rem 1rem;
}
.box-content span:nth-child(1){
  position: absolute;
  padding: 10px;
  border-style: solid;
  border-color: #0595eb;
  border-width: 3px 0 0 3px;
}
.box-content span:nth-child(2){
  position: absolute;
  right: 5px;
  top: 0;
  padding: 10px;
  border-style: solid;
  border-color: #0595eb;
  border-width: 3px 3px 0 0;
}
.box-content span:nth-child(3){
  position: absolute;
  right: 5px;
  bottom: 0;
  padding: 10px;
  border-style: solid;
  border-color: #0595eb;
  border-width: 0 3px 3px 0;
}
.box-content span:nth-child(4){
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  border-style: solid;
  border-color: #0595eb;
  border-width: 0 0 3px 3px;
}
.left {
  flex: 0 0 530px;
  display: flex;
  flex-direction: column;
  background: url("../assets/line_img.png") top right no-repeat;
  margin-left: 1rem;
}
.left-one {
  margin-top: 1rem;
  margin-left: 1rem;
}
.right {
  flex: 0 0 530px;
  display: flex;
  flex-direction: column;
  background: url("../assets/line_img.png") top left no-repeat;
}
.right-one{
  margin-top: 1rem;
  margin-left: 1rem;
}
.right-last{
  margin-top: 1rem;
  margin-left: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.el-rate{
  height: auto;
  line-height: normal;
  margin-left: -20px;
}
.el-rate >>> .el-rate__icon{
  font-size: 2rem;
}
</style>
